<template>
  <div class="component-nav-menu">
    <el-menu
      :default-active="$route.path"
      router
      active-text-color="#1aad1a"
      class="el-menu-vertical-demo">
      <div class="nav-item" v-for="(nav, index) in menu" :key="index">
        <el-submenu :index="String(index)" v-if="nav.children && nav.children.length">
          <template slot="title">
            <span>{{ nav.name }}</span>
          </template>
          <el-menu-item v-for="(subnav, subinx) in nav.children" :key="subinx" :index="subnav.url">
            {{ subnav.name }}
          </el-menu-item>
        </el-submenu>
        <el-menu-item :index="nav.url" v-else>
          <span slot="title">{{ nav.name }}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script type="text/ecmascript-6">
import { Menu, Submenu, MenuItemGroup, MenuItem } from 'element-ui'
export default {
  name: 'component-nav-menu',
  props: {
    menu: {
      type: Array
    }
  },
  components: {
    elMenu: Menu,
    elSubmenu: Submenu,
    elMenuItemGroup: MenuItemGroup,
    elMenuItem: MenuItem
  }
}
</script>

<style lang="less" rel="stylesheet/less">
  .component-nav-menu {
    margin: 0 auto;
    height: 100%;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .2);
    .el-menu {
      border: none;
    }
  }
</style>
